<!-- 添加分类 -->
<template>
  <div>
    <head-top shop-text="添加分类" shop-btn-text="刷新"></head-top>
    <section id="main">
      <nav-top txt="修改分类" :link="'/home/Shop/ShopClass'"></nav-top>
      <!-- 基本信息 -->
      <div class="info">
        <!-- 信息添加 -->
        <div>
          <el-form label-width="100px" class="demo-ruleForm">
            <el-form-item prop="">
              <template>
                <div slot="label">
                  <span class="star">分类名称</span>
                </div>
                <el-input v-model="categoryName"></el-input>
              </template>
            </el-form-item>

            <el-form-item>
              <template>
                <div slot="label">
                  <span>上级分类</span>
                </div>
              </template>
              <el-select placeholder="请选择上级分类" v-model="selected">
                <el-option
                  v-for="item in lastCateGory2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  @click.native="getValue(item.label)"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">排序</span>
                </div>
                <el-input v-model="seq"></el-input>
              </template>
            </el-form-item>

            <el-form-item label="是否上架" prop="status">
              <el-switch
                :value="status=='0'"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="isGrounding"
              >
              </el-switch>
            </el-form-item>

            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">分类图标</span>
                </div>
              </template>
              <!-- :on-change="handleChange" -->
              <!-- :file-list="fileList" -->
              <el-upload
                class="upload-demo"
                action="www.baidu.com"
                :auto-upload="false"
                :show-file-list="true"
                :on-change="beforeUpload"
              >
                <!-- :on-change="beforeUpload" -->
                <el-button size="small" type="primary">点击上传</el-button>
                <div slot="tip" class="el-upload__tip">
                  只能上传jpg/png文件，且不超过500kb
                </div>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <template>
                <div slot="label">
                  <span class="star">分类描述</span>
                </div>
              </template>
              <el-input
                type="textarea"
                :rows="2"
                placeholder="请输入内容"
                v-model="textarea"
                width="300"
              >
              </el-input>
            </el-form-item>
          </el-form>
        </div>
        <el-button type="primary" @click="EditImg">提交</el-button>
      </div>
    </section>
  </div>
</template>
  
  <script>
import HeadTop from "@/components/Shop/HeadTop.vue";
import NavTop from "@/components/Shop/NavTop.vue";
import beforeUpload from "@/utils/beforeUpload";
import { mapActions } from "vuex";
export default {
  name: "shopClass",
  components: {
    HeadTop,
    NavTop,
  },
  data() {
    return {
      dialogImageUrl: "",
      dialogVisible: false,
      status: 0,
      textarea: "", //文本域  商品描述
      categoryName: "", //分类名称
      lastCategory: [], //上级分类
      selected: "", //  默认选中
      lastCateGory2: [
        {
          label: "一级分类",
          value: 0,
        },
        {
          label: "二级分类",
          value: 1,
        },
      ],
      selectLabel: "",  //默认值
      selectValue:'',
      seq: "", //排序
      categoryId:'',
      imgUrl:'',  //保存图片src
      imgName:'', //不知道干嘛的但是先写起
      imgFile:''  ,//保存文件数据
    };
  },

  created() {
    if(this.$route.query.categoryId){
      this.categoryId=this.$route.query.categoryId
    }
    this.getDetailById();
  },
  mounted() {},
  methods: {
    ...mapActions("shop", ["GetShopListById", "UpdateShopClass", "AddShopClass","EditShopClass","UploadFile"]),

    // 获取选择的下拉列表框的值
    getValue(val) {
      this.selectLabel = val;
      console.log('val',val);
    },

        // 添加图片  获取图片在线地址
        EditImg() {
      // 上传图片
      let file=new FormData()
      file.append('imgFile',this.imgFile)
      this.UploadFile({'file':file.get('imgFile')}).then(res=>{
        console.log(res.data.data);
        this.imgUrl=res.data.data
        console.log(this.imgUrl);
        this.EditClass()
      })
    
    },

    // 修改商品按钮事件
    EditClass() {
      let categoryId=this.categoryId
      let categoryName = this.categoryName;
      if(this.selected==0){
        this.selectLabel='一级分类'
      }else{
        this.selectLabel='二级分类'
      }
      let grade=this.selectLabel; 
      let icon=this.imgUrl
      let seq = this.seq;
      let description=this.textarea
      let status=this.status
      console.log({categoryId,categoryName, grade,seq, status,icon, description});
      this.EditShopClass({ categoryId,categoryName, grade,seq, status,icon, description }).then((res) => {
        console.log(res);
        this.open()
      });
    },
    open(){
      this.$message('修改成功')
      this.$router.push('/home/Shop/ShopClass')
    },
    changeValue() {
      if (this.value == true) {
        this.value = false;
        console.log(this.value);
      } else {
        this.value = true;
        console.log(this.value);
      }
    },
    // 获取数据
    getDetailById() {
      let id=this.categoryId
      this.GetShopListById(id).then((res) => {
        console.log(res);
        this.status=res.data.status
        this.textarea=res.data.description
        this.categoryName=res.data.categoryName
        this.seq=res.data.seq
        if(res.data.grade=='二级分类'){
          this.selected=1
        }else{
          this.selected=0
        }
        console.log('status',this.status);
        console.log('此分类详情',res);
      });
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    //限制上传文件类型
    beforeUpload(file) {
      // 判断文件的类型和文件大小
      console.log('beforeUpload---file',file);
      // 获取文件的后缀名
      let res=file.name.split('.')[file.name.split('.').length-1]
      let arr=['png','jpg','jpeg']
      if(!arr.includes(res)){
        return this.$message.error('上传头像图片只能是 jpg 格式或者 png 格式或者 jpeg 格式')
      }
      // 判断文件大小
      if(file.size/1024/1024>2){
        return this.$message.error('文件大小不能超过2M')
      }

      
      this.imgUrl=URL.createObjectURL(file.raw)     //设置图片src
      this.imgFile=file.raw   //图片文件数据，存到imgfile属性中
      console.log('file',this.imgFile);
    },

    isGrounding(){
      this.status=this.status==0?1:0
    }
  },
};
</script>
  
  <style scoped>
/* 主体 */
#main {
  margin: auto;
  width: 96%;
}
.info p {
  text-align: center;
  margin: 20px 0 30px 0;
  color: #999;
}
.info {
  border: 1px solid #e4e4e4;
}
.el-input {
  width: 206px;
}
.star::before {
  color: red;
  content: "*";
}
.info > div form {
  margin: auto;
  width: 70%;
}
.info > button {
  display: block;
  margin: 30px auto;
}
::v-deep .el-textarea {
  width: 300px;
}
</style>